<template>
  <div class="search">
    <div class="car">
      <div class="keyword">
        <div class="icon"><i class="el-icon-search"></i></div>
        <div class="value">
          <input type="text" v-model="searchObject">
        </div>
      </div>

      <div class="history">
        <div class="title">历史记录</div>
        <div class="history_list none_scrollbar">
          <!-- v-for="item in 1" :key="item" -->
          <div  class="item">
            <div class="text">苹果</div>
            <div class="text">软件工程</div>
            <!-- <div class="close"><i class="el-icon-close"></i></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "searchView",
}
</script>

<style lang="less" scoped>
.search {
  .car {
    width: 800px;
    margin: 0 auto;
    border-radius: 16px;
    background-color: rgba(255,255,255,0.3);
    padding: 60px 0;
    .keyword {
      width: 500px;
      margin: 0 auto;
      height: 52px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      background: #fff;
      border-radius: 16px;
      margin-bottom: 50px;
      .icon {
        font-size: 24px;
      }
      .value {
        flex: 1;
        height: 100%;
        padding: 0 20px;
        input {
          margin: 0;
          padding: 0;
          border: none;
          width: 100%;
          height: 100%;
          font-size: 24px;
        }
      }
    }
    .history {
      width: 700px;
      margin: 0 auto;
      border-radius: 16px;
      background-color: rgba(255,255,255,0.3);
      overflow: auto;
      .title {
        text-align: center;
        font-weight: 400;
        font-size: 36px;
      }
      .history_list {
        display: flex;
        flex-wrap: wrap;
        padding: 40px;
        height: 400px;
        overflow: auto;
        .item {
          padding: 10px 0;
          //width: 50%;
          height:20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 26px;
          font-weight: 400;
          .text {
            padding: 0 40px;
          }
          .close {
            padding: 0 40px;
          }
        }
      }
    }
  }
}
</style>
